<template>
  <Popup
    v-model:show="showPopup"
    :style="{
      background: 'transparent',
      overflow: 'hidden',
      height: '100vh',
      'max-width': '100vw',
    }"
    ><div class="vessel">
      <div @click="showPopup = false" class="reelect-box">
        <div class="reelect-txt">返回</div>
      </div>
      <img src="@/assets/image/add-friend-panda.png" class="panda-img" />
      <div class="phone-box">
        <img src="@/assets/image/phone-heard.png" class="phone-box-heard" />
        <div class="phone-body-box">
          <div class="phone-content-heard">
            <img
              :src="
                studentInfo?.avatar?.[0]?.fileUrl || avatar
              "
              class="heard-img"
            />
            <span>我的ID：{{ studentInfo?.idNumber }}</span>
          </div>
          <div class="phone-content-box" @keydown.enter="searchFun">
            <div class="input-container">
              <img src="@/assets/svg/search.svg" class="icon" />
              <input
                type="text"
                v-model="searchValue"
                class="input-field"
                placeholder="搜索..."
              />
            </div>
            <div v-if="searchResult" class="search-result">
              <img
                :src="
                  searchResult?.avatar?.[0]?.fileUrl ||
                  avatar
                "
                class="result-img"
              />
              <div class="search-result-text">
                <div class="name">{{ searchResult?.studentName }}</div>
                <div class="class-name">{{ searchResult?.className }}</div>
                <div class="grade">
                  {{ "LV." + searchResult?.grade + searchResult?.rankName }}
                </div>
              </div>
              <div
                class="search-result-button"
                @click="postSendFriendApplyClick(searchResult?.studentId)"
              >
                {{ searchResult.agree == 2 ? "申请好友" : "申请中" }}
              </div>
            </div>
            <div v-else class="search-result">
              <div class="default-text">
                请搜索对方ID或在下方好友列表添加结伴
              </div>
            </div>
            <div class="title-box">同班同学{{ "（" + total + "）" }}</div>
            <div class="classmates-flex-box">
              <div class="item-box" v-for="item in classmateList" :key="item">
                <img
                  :src="item?.avatar?.[0]?.fileUrl || avatar"
                  class="avatar-img"
                />
                <div class="classmates-item-box">
                  <div class="classmates-name">{{ item.studentName }}</div>
                  <div class="classmates-grade">
                    LV.{{ item?.grade + item?.rankName }}
                  </div>
                  <div
                    :class="{
                      'classmates-button': item.agree == 2,
                      'classmates-button-dis': item.agree != 2,
                    }"
                    @click="postSendFriendApplyClick(item.studentId)"
                  >
                    {{ item.agree == 2 ? "申请好友" : "已添加" }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <img src="@/assets/image/phone-button.png" class="phone-box-button" />
      </div>
    </div>
  </Popup>
</template>
<script lang="ts" setup>
import { computed, ref, watch } from "vue";
import { Popup, showToast } from "vant";
import {
  getClassmateList,
  getFriendList,
  postSendFriendApply,
} from "@/api/common";
import { useMainStore } from "@/store";
import avatar from "@/assets/svg/avatar.svg";
const showPopup = defineModel<boolean>("showPopup");
const searchValue = ref("");
const mainStore = useMainStore();
const studentInfo = computed(() => mainStore.studentInfo);
const searchResult = ref();
const classmateList = ref([] as any[]);
const total = ref(0);
const pagination = ref({
  pageNum: 1,
  pageSize: 10,
  searchCount: true,
  studentId: "",
});
function searchFun() {
  const data = {
    studentId: studentInfo.value.studentId,
    idNumber: searchValue.value,
  };
  getFriendList(data).then((res) => {
    searchResult.value = res.data?.[0];
  });
}

function onloadClassmate() {
  getClassmateList(pagination.value).then((res) => {
    classmateList.value = [...classmateList.value, ...res.data.list];
    total.value = res.data.total;
    if (classmateList.value.length < res.data.total) {
      pagination.value.pageNum++;
      onloadClassmate();
    }
  });
}

watch(showPopup, (newValue) => {
  if (newValue) {
    pagination.value.pageNum = 1;
    classmateList.value = []; // 清空旧数据
    pagination.value.studentId = studentInfo.value.studentId;
    onloadClassmate();
  }
});
function postSendFriendApplyClick(id: string) {
  postSendFriendApply({
    studentId: studentInfo.value.studentId,
    friendId: id,
  }).then(() => {
    showToast("申请成功");
    pagination.value.pageNum = 1;
    classmateList.value = []; // 清空旧数据
    searchFun();
    onloadClassmate();
  });
}
</script>
<style lang="scss" scoped>
.vessel {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  .panda-img {
    position: absolute;
    top: 30px;
    right: -15px;
    width: 197px;
    height: 184px;
    z-index: 1;
  }
  .reelect-box {
    position: absolute;
    left: 20px;
    top: calc(10px + var(--dynamic-top));
    width: 64px;
    height: 28px;
    background: url("@/assets/image/back.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .reelect-txt {
      font-family: Source Han Sans;
      font-size: 14px;
      font-weight: 500;
      line-height: 28px;
      letter-spacing: 0px;
      font-variation-settings: "opsz" auto;
      color: #ffffff;
      margin: 0 0 0 20px;
      text-align: center;
    }
  }
}
.phone-box {
  z-index: 2;
  position: relative;
  margin: 131px 0 0 0;
  width: 336px;
  height: 606px;
  background-image: url(@/assets/image/phone-background.png);
  background-size: 100% 100%;
  background-repeat: repeat;
  .phone-body-box {
    position: absolute;
    top: 28px;
    left: 15px;
    width: 306px;
    height: 524px;
    border-radius: 10px;
    background-color: #ffffff;
    .phone-content-heard {
      width: calc(100% - 18px);
      height: calc(42px - 14px);
      border-radius: 10px 10px 0px 0px;
      background: #f6c67e;
      font-family: Source Han Sans;
      font-size: 18px;
      font-weight: bold;
      line-height: 32px;
      letter-spacing: 0px;
      gap: 9px;
      padding: 7.5px 9.5px;
      color: #ffffff;
      display: flex;
      align-items: center;
      .heard-img {
        border-radius: 80px;
        width: 30px;
        height: 30px;
      }
      span {
        font-family: Source Han Sans;
        font-size: 16px;
        font-weight: 500;
        line-height: 28px;
        letter-spacing: normal;
        /* 纯白 */
        color: #ffffff;
      }
    }
    .phone-content-box {
      width: calc(100% - 20px);
      height: calc(100% - 62px);
      border-radius: 0px 0px 10px 10px;
      background: #f6f6f6;
      --van-search-background: #ffffff;
      --van-search-content-background: #ffffff;
      padding: 10px;
      .input-container {
        display: flex;
        align-items: center;
        border-radius: 100px;
        background: #ffffff;
        box-shadow: 0px 4px 10px 0px rgba(228, 228, 228, 0.3);
        padding: 5px;
        height: 24px;
      }
      .icon {
        font-size: 14px;
        margin: 0 11px 0 10px; /* 图标与输入框之间的间距 */
      }
      .input-field {
        border: none;
        outline: none;
        background: transparent;
        flex-grow: 1;
        font-family: Source Han Sans;
        font-size: 14px;
        font-weight: 350;
        line-height: 22px;
        letter-spacing: normal;
        color: #666666;
      }
      .classmates-flex-box {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        height: 290px;
        overflow-y: scroll;
        .item-box {
          width: calc(50% - 5px);
          height: 155px;
          position: relative;
          .classmates-item-box {
            position: absolute;
            top: 25px;
            width: 100%;
            height: 130px;
            border-radius: 18px;
            background: #ffffff;
            box-shadow: 0px 4px 10px 0px rgba(228, 228, 228, 0.3);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 4px;
            .classmates-button-dis {
              width: 120px;
              height: 40px;
              border-radius: 50px;
              border: 1px solid #ffc500;
              font-family: Source Han Sans;
              font-size: 14px;
              font-weight: 350;
              line-height: 22px;
              text-align: center;
              letter-spacing: normal;
              color: #ffc500;
              display: flex;
              align-items: center;
              justify-content: center;
            }
            .classmates-button {
              width: 120px;
              height: 40px;
              border-radius: 50px;
              background: linear-gradient(90deg, #ffc500 0%, #ffb200 100%);
              box-shadow: inset -1px -1px 2px 0px #d89f37,
                inset 1px 1px 2px 0px rgba(255, 255, 255, 0.3);
              font-family: Source Han Sans;
              font-size: 14px;
              font-weight: 350;
              line-height: 22px;
              text-align: center;
              letter-spacing: normal;
              color: #ffffff;
              display: flex;
              align-items: center;
              justify-content: center;
            }
            .classmates-name {
              font-family: Source Han Sans;
              font-size: 16px;
              font-weight: 350;
              line-height: 22.4px;
              letter-spacing: normal;
              color: #333333;
            }
            .classmates-grade {
              font-family: Source Han Sans;
              font-size: 12px;
              font-weight: 350;
              line-height: 20px;
              text-align: center;
              letter-spacing: normal;
              color: #ffc500;
            }
          }
          .avatar-img {
            position: absolute;
            width: 50px;
            height: 50px;
            border-radius: 80px;
            top: 0;
            left: 44px;
            z-index: 4;
          }
        }
      }
      .title-box {
        margin: 3px auto;
        font-family: Source Han Sans;
        font-size: 16px;
        font-weight: 350;
        line-height: 28px;
        letter-spacing: normal;
        color: #333333;
      }
      .search-result {
        margin: 10px 0 0 0;
        width: 100%;
        height: 95px;
        border-radius: 18px;
        background: #ffffff;
        box-shadow: 0px 4px 10px 0px rgba(228, 228, 228, 0.3);
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 16px;
        .default-text {
          font-family: Source Han Sans;
          font-size: 12px;
          font-weight: 350;
          line-height: 20px;
          text-align: center;
          letter-spacing: normal;
          color: #666666;
        }
        .result-img {
          width: 60px;
          height: 60px;
          border-radius: 80px;
        }
        .search-result-button {
          width: 100px;
          height: 40px;
          border-radius: 50px;
          background: linear-gradient(90deg, #ffc500 0%, #ffb200 100%);
          box-shadow: inset -1px -1px 2px 0px #d89f37,
            inset 1px 1px 2px 0px rgba(255, 255, 255, 0.3);
          display: flex;
          justify-content: center;
          align-items: center;
          font-family: Source Han Sans;
          font-size: 14px;
          font-weight: 350;
          line-height: 22px;
          text-align: center;
          letter-spacing: normal;
          color: #ffffff;
        }
        .search-result-text {
          display: flex;
          flex-direction: column;
          justify-content: center;
          .grade {
            height: 20px;
            font-family: Source Han Sans;
            font-size: 12px;
            font-weight: 350;
            line-height: 20px;
            letter-spacing: normal;
            color: #999999;
          }
          .class-name {
            height: 20px;
            font-family: Source Han Sans;
            font-size: 12px;
            font-weight: 350;
            line-height: 20px;
            letter-spacing: normal;
            color: #666666;
          }
          .name {
            height: 22px;
            font-family: Source Han Sans;
            font-size: 14px;
            font-weight: 350;
            line-height: 22px;
            letter-spacing: normal;
            color: #333333;
          }
        }
      }
      .van-search__field {
        border-radius: 10px;
        height: 42px;
      }
    }
  }
  .phone-box-heard {
    position: absolute;
    top: 7px;
    width: 87px;
    height: 16px;
    left: 124px;
  }
  .phone-box-button {
    width: 47.5px;
    height: 47.5px;
    position: absolute;
    bottom: 5px;
    left: 138.51px;
  }
}
</style>
